<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            height: 100vh;
            background: white;
            overflow: hidden;
        }
        #demo {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            background: pink;
            transform: translate3d(-50%,-50%,0);
        }
    </style>
</head>
<body>
    <canvas id="demo" width="400" height="400"></canvas>
</body>
<script>
    window.onload = function (){
        var canvas = document.getElementById("demo");
        if (canvas.getContext){
            var ctx = canvas.getContext("2d");
            setInterval(function (){
                ctx.clearRect(0,0,canvas.width,canvas.height)
                move();
            },1000)
            move();
            function move(){
                ctx.save();
                // 初始化样式
                ctx.lineWidth = 8;
                ctx.lineCap = "round";
                ctx.strokeStyle = "black";

                ctx.translate(200,200)
                ctx.rotate(-90*Math.PI/180);
                ctx.beginPath();
                //外层空心圆盘
                ctx.save();
                ctx.lineWidth = 14;
                ctx.strokeStyle = "#325fa2";
                ctx.beginPath();
                ctx.arc(0,0,140,0,360*Math.PI/180);
                ctx.stroke();
                ctx.restore();

                //时针刻度
                ctx.save();
                for (var i = 0;i<12;i++){
                    ctx.rotate(30*Math.PI/180);
                    ctx.beginPath();
                    ctx.moveTo(100,0);
                    ctx.lineTo(120,0);
                    ctx.stroke();
                }
                ctx.restore();

                //分针刻度
                ctx.save();
                ctx.lineWidth = 4;

                for(var i=0;i<60;i++){
                    ctx.rotate(6*Math.PI/180);
                    if((i+1)%5!=0){
                        ctx.beginPath();
                        ctx.moveTo(117,0)
                        ctx.lineTo(120,0);
                        ctx.stroke();
                    }
                }
                ctx.restore();
                //时分秒针 表柱
                var date = new Date();
                var s = date.getSeconds();
                var m = date.getMinutes()+s/60;
                var h = date.getHours()+m/60;
                h = h>12?h-12:h

                //时针
                ctx.save();
                ctx.lineWidth = 14;
                ctx.rotate(h*30*Math.PI/180)
                ctx.beginPath();
                ctx.moveTo(-20,0);
                ctx.lineTo(80,0);
                ctx.stroke();
                ctx.restore();
                //分针
                ctx.save();
                ctx.lineWidth = 14;
                ctx.rotate(m*6*Math.PI/180)
                ctx.beginPath();
                ctx.moveTo(-28,0);
                ctx.lineTo(112,0);
                ctx.stroke();

                ctx.restore();
                //分针
                ctx.save();
                ctx.lineWidth = 6;
                ctx.strokeStyle = "#d40000";
                ctx.fillStyle = "#d40000";
                ctx.rotate(s*6*Math.PI/180)
                ctx.beginPath();
                ctx.moveTo(-30,0);
                ctx.lineTo(83,0);
                ctx.stroke();
                ctx.beginPath();
                //表座
                ctx.arc(0,0,10,0,360*Math.PI/180);
                ctx.fill();
                ctx.restore();

                ctx.restore();
            }
        }
    }
</script>
</html>